<template>
  <div>
    <h3>台区列表</h3>
    <group>
      <x-input title="归属地：" placeholder="请输入归属地" v-model="location" @on-enter="search" style="font-size:18px;"></x-input>
      <x-input title="台区号：" placeholder="请输入台区号" v-model="areaNo" @on-enter="search" style="font-size:18px;"></x-input>
      <flexbox>
        <flexbox-item>
          <x-button type="primary" @click.native="search">查询</x-button>
        </flexbox-item>
        <flexbox-item>
          <x-button type="primary" @click.native="reset">重置</x-button>
        </flexbox-item>
      </flexbox>
    </group>
    <group>
      <x-button type="primary" @click.native="addArea" v-if='isAdmin'>+添加台区</x-button>
    </group>
    <group>
      <card>
        <div slot="content" class="card-flex card-content">
          <div class="vux-1px-r">
            台区总数
            <br />
            <span>{{totalArea}}</span>
          </div>
          <div class="vux-1px-r">
            在线台区数
            <br />
            <span>{{onlineCount}}</span>
          </div>
          <div>
            <check-icon :value.sync="checkIcon" type="plain"><br />显示在线台数</check-icon>
          </div>
        </div>
      </card>

      <div>
        <div class="table table-header">
          <div>归属地</div>
          <div>台区号</div>
          <div>台区地点</div>
          <div>操作</div>
        </div>
        <div v-if="info.length==0" style="text-align:center; font-size:14px; border:1px solid #C7C7C7; line-height: 30px;">暂无数据</div>

        <div v-for="item in info" :key="item.id" class="table-body">
          <div class="table" :class="[item.status ? '' : 'noOnline']">
            <div @click="toAreaInfo(item.id)">{{item.location}}</div>
            <div @click="toAreaInfo(item.id)">{{item.areaNo}}</div>
            <div @click="toAreaInfo(item.id)">{{item.address}}</div>
            <div>
              <x-icon type="ios-plus" size="33" style="fill:#005e9c" v-if="isShowSet!=item.id" @click="showSet(item.id)"></x-icon>
              <x-icon type="ios-close" size="33" style="fill:#F70968" v-if="isShowSet==item.id" @click="showSet(item.id)"></x-icon>
            </div>
          </div>
          <div class="table-set" v-if="isShowSet==item.id">
            <x-button @click.native="toStatistics(item.id)" type="primary">电流趋势</x-button>
            <x-button @click.native="toAreaChangeRecord(item.id)" type="primary">换相纪录</x-button>
            <x-button @click.native="toAreaData(item.id)" type="primary" :disabled="!item.status">实时数据</x-button>
            <x-button @click.native="toMachineData(item.id)" type="primary" :disabled="!item.status">换相器</x-button>
            <x-button @click.native="comfirm(item.id)" type="primary" :disabled="!item.status" v-if='isAdmin'>发送指令</x-button>
          </div>
        </div>
      </div>
    </group>
    <div class="pagination">
      <el-pagination background layout="prev, pager, next" :total="total*size" :pager-count="5" :page-size="size" @current-change="currentChange" @prev-click="currentChange" @next-click="currentChange">
      </el-pagination>
    </div>

    <!--弹窗-->
    <div>
      <confirm v-model="showConfirm" show-input title="请输入指令" @on-confirm="onConfirm">
      </confirm>
    </div>

    <loading :show="showLoading" text="加载中..."></loading>
    <loading :show="showSend" text="发送中..."></loading>
    <toast v-model="showToast" :type="toastType" :text="toastText"></toast>

  </div>
</template>

<script>
import {
  Group,
  Cell,
  XInput,
  XButton,
  Flexbox,
  FlexboxItem,
  Card,
  CheckIcon,
  Confirm, Loading ,Toast
} from "vux";
import Http from "./../unit/http.js";

export default {
  components: {
    Group,
    Cell,
    XInput,
    XButton,
    Flexbox,
    FlexboxItem,
    Card,
    CheckIcon,
    Confirm, Loading, Toast
  },

  data() {
    return {
      showLoading:false,
      showSend:false,
      showToast:false,
      toastType:"",
      toastText:"", 

      location: "", //查询的绑定值
      checkIcon: false,
      page: 1,
      areaNo: "", //查询的绑定值

      showConfirm: false,
      comfirmID: "",
      isShowSet: 0,

      info: [],
      countArea: {},
      total: 0,
      size: 0,
      totalArea: 0,
      onlineCount: 0,
      isAdmin:false
    };
  },

  mounted() {
    this.getData(this.location, this.checkIcon, this.page, this.areaNo);
    var role = sessionStorage.getItem("role")
    this.isAdmin = 1 == role;
  },

  watch: {
    checkIcon: function() {
      return this.getData(
        this.location,
        this.checkIcon,
        this.page,
        this.areaNo
      );
    },
    info:function(){
      this.showLoading = false
    }
  },
  methods: {
    search() {
      this.getData(this.location, this.checkIcon, this.page, this.areaNo);
    },

    reset() {
      this.location = "";
      this.areaNo = "";
      this.search();
    },

    currentChange(val) {
      this.page = val;
      this.getData(this.location, this.checkIcon, this.page, this.areaNo);
    },

    getData(location, checkIcon, page, areaNo) {
      this.getArea(location, checkIcon, page, areaNo);
      this.getCountArea(areaNo);
    },

    getArea(location, checkIcon, page, areaNo) {
      this.showLoading = true;
      const self = this;
      const param = {
        location: location,
        sortByOnline: checkIcon,
        page: page,
        areaNo: areaNo
      };
      const url = "/yitai/admin/area";
      const success = function(response) {
        
        self.info = response.data.info;
        self.total = response.data.total;
        self.size = response.data.size;
      };
      const failed = function(response) {
        
      };
      Http.http(url, param, success, failed);
    },

    getCountArea(areaNo) {
      const self = this;
      const param = { areaNo: areaNo };
      const url = "/yitai/admin/countArea";
      const success = function(response) {
        self.totalArea = response.data.totalArea;
        self.onlineCount = response.data.onlineCount;
      };
      const failed = function(response) {
        
      };
      Http.http(url, param, success, failed);
    },

    showSet(id) {
      if (this.isShowSet == id) {
        this.isShowSet = 0;
      } else {
        this.isShowSet = id;
      }
    },

    addArea() {
      this.$router.push({ path: "/addArea" });
    },

    toStatistics(id) {
      this.$router.push({ path: "/statistics", query: { id: id } });
    },

    toAreaChangeRecord(id) {
      const self = this;
      const param = { id: id };
      const url = "/yitai/admin/areaInfo";
      const success = function(response) {
        
      };
      const failed = function(response) {
        
      };
      Http.http(url, param, success, failed);
      this.$router.push({ path: "/areaChangeRecord", query: { id: id } });
    },

    toAreaData(id) {
      this.$router.push({ path: "/areaData", query: { id: id } });
    },

    toMachineData(id) {
      this.$router.push({ path: "/machineData", query: { id: id } });
    },

    toAreaInfo(id) {
      this.$router.push({ path: "/areaInfo", query: { id: id } });
    },



    //弹窗处理事件
    comfirm(id) {
      this.showConfirm = true;
      this.comfirmID = id;
    },

    onConfirm(value) {
      //value为点击确定后，输入框的值
      this.showSend = true;
      const self = this; 
      const param = { id: self.comfirmID , cmd: value };
      const url = "/yitai/admin/semdCommend";
      const success = function(response) {
        self.showSend = false;
        self.toastText = "发送成功";
        self.toastType = "success";
        self.showToast = true;
      };
      const failed = function(response) {
        self.showSend = false;
        self.toastText = "发送失败";
        self.toastType = "cancel";
        self.showToast = true;
      };
      Http.http(url, param, success, failed);
    }
  }
};
</script>





<style scoped >
button.weui-btn {
  font-size: 18px;
}
.weui-btn_primary {
  background-color: #005e9c;
}
.weui-btn_primary:not(.weui-btn_disabled):active {
  color: rgba(255, 255, 255, 0.6);
  background-color: #034b7a;
}
.weui-btn_disabled.weui-btn_primary {
  background-color: #3978a1;
}

.card-flex {
  display: flex;
}
.card-content {
  padding: 10px 0;
}
.card-padding {
  padding: 15px;
}
.card-flex > div {
  flex: 1;
  text-align: center;
  font-size: 18px;
}
.card-flex span {
  color: #005e9c;
}
.vux-1px-r:after {
  border-right: 1px solid #005e9c !important;
}

.table-header {
  font-weight: bold;
  font-size: 17px !important;
  border-top: 1px solid #C7C7C7;
  border-bottom:1px solid #C7C7C7;
  border-right:1px solid #C7C7C7;
}
.table-header div {
  text-align: center !important;
  vertical-align: middle;
  line-height: 30px;
  padding:6px 0;
  color: #242424;
}
.table-body{
  border-bottom:1px solid #C7C7C7;
  border-right:1px solid #C7C7C7;
}

.table {
  font-size: 18px;
  display: table;
  width: 100%;
  color: #005e9c;
}
.table div {
  border-left: 1px solid #C7C7C7;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  padding:8px 0;
}
.table div:nth-child(1) {
  width: 15%;
  
}
.table div:nth-child(2) {
  width: 15%;
}
.table div:nth-child(3) {
  width: 60%;
  text-align: left;
  padding: 2px 6px;
}
.table div:nth-child(4) {
  width: 10%;
}

.table-set {
  display: flex;
  justify-content: space-evenly;
}
.table-set button.weui-btn {
  font-size: 16px;
  margin: 16px 3px;
}
.table-set .weui-btn {
  padding-left: 0;
  padding-right: 0;
}
.noOnline {
  color: #666666 !important;
}

.weui-dialog__btn_primary {
  color: #005e9c !important;
}

.pagination {
  padding-top: 15px;
  display: flex;
  justify-content: center;
}
</style>